<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 100%;
            height: 300px;
            overflow: hidden;
        }
        #box>div{
            width: 1000px;
            height: 40px;
            margin: 0 auto;
            margin-top: 50px;
            background-color: #e8e3e3;
        }
        #box>div>ul{
            overflow: hidden;
        }
        #box>div>ul>li{
            float: left;
            width: 100px;
            height: 40px;
            padding-left: 20px;
            line-height: 40px;
            background-color: #e8e3e3;
            border: 1px solid pink;
            box-sizing: border-box;
            border-left: 1px dashed pink;
            border-right: 1px dashed pink;
        }
        #box>div>ul>li:nth-child(1){color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -54px;
        }
        #box>div>ul>li:nth-child(2){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -132px;
        }
        #box>div>ul>li:nth-child(3){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -214px;
        }
        #box>div>ul>li:nth-child(4){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -296px;
        }
        #box>div>ul>li:nth-child(5){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -376px;
        }
        #box>div>ul>li:nth-child(6){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -455px;
        }
        #box>div>ul>li:nth-child(7){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -531px;
        }
        #box>div>ul>li:nth-child(8){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -606px;
        }
        #box>div>ul>li:nth-child(9){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -684px;
        }
        #box>div>ul>li:nth-child(10){
            background: url("./img/背景颜色不一样.png") no-repeat 0px -762px;
        }
        #box>div>ul>li:nth-child(1):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -92px;
        }
        #box>div>ul>li:nth-child(2):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -170px;
        }
        #box>div>ul>li:nth-child(3):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -252px;
        }
        #box>div>ul>li:nth-child(4):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -332px;
        }
        #box>div>ul>li:nth-child(5):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -412px;
        }
        #box>div>ul>li:nth-child(6):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -492px;
        }
        #box>div>ul>li:nth-child(7):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -572px;}
        #box>div>ul>li:nth-child(8):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -652px;}
        #box>div>ul>li:nth-child(9):hover{color: rgb(10, 216, 69);
            background: url("./img/背景颜色不一样.png") no-repeat 0px -732px;}
        #box>div>ul>li:nth-child(10):hover{
            background: url("./img/背景颜色不一样.png") no-repeat 0px -812px;
        color: rgb(10, 216, 69);}
    </style>
</head>
<body>
    <div id="box">
        <div>
            <ul>
                <li>我的主页</li>
                <li>新闻头条</li>
                <li>电视剧</li>
                <li>最新电影</li>
                <li>小说大全</li>
                <li>旅游度假</li>
                <li>小游戏</li>
                <li>正品购物</li>
                <li>美团外卖</li>
                <li>移动互联</li>
            </ul>
        </div>
    </div>
</body>
</html>